"use client"
import {useSearchParams} from "next/navigation";
import Image from "next/image";
import News from "@/constant/News";
import Link from "next/link";
import {FaQq, FaWeibo, FaWeixin} from "react-icons/fa";
import {RiThumbUpFill} from "react-icons/ri";
import Foods from "@/constant/Foods";
import {useState} from "react";
import EmptyLine from "@/components/EmptyLine";
import Productions from "@/constant/Productions";

export default function Page(){
    const params = useSearchParams()
    const id = params.get("id")
    const [likeNum,setLikeNum] = useState(131)
    const news = News.find((item)=> item.id === id)
    return(
        <div>
        <div className={"max-w-7xl mx-auto"}>
            <div className={"p-4 sticky top-[64px] bg-white"}>
                <div><Link href={'/'} className={"hover:text-blue-500"}>首页</Link> / <Link href={'/news'} className={"hover:text-blue-500"}>民生动态</Link> / <Link className={"text-gray-500"} href={'#'}>详情</Link></div>
            </div>
            <div className={" p-4"}>
                <div className={"h-[400px] object-cover overflow-hidden rounded-md"}>
                    <Image src={news?.cover||''} alt={"封面"}  width={1280} height={400} className={"object-cover w-full h-full"}/>
                </div>
                <div className={"mt-4"}>
                    <div className={"text-2xl"}>{news?.title}</div>
                    <div className={"text-xs py-2 text-gray-500"}>发布时间: {news?.createdAt}  浏览 {news?.viewNum || 0}</div>
                    <div className={"mt-2 text-gray-700"}>{news?.content}</div>
                </div>
                <div className={"text-xs text-gray-500 py-4 flex gap-x-4 items-center justify-end"}>
                    <span>分享到: </span>
                    <FaWeixin size={20} />
                    <FaQq size={18} />
                    <FaWeibo size={20} />
                </div>
               <div className={"flex justify-center flex-col items-center"}>
                   <div className={"flex justify-center items-center p-3 bg-blue-500/30 rounded-full h-[58px] w-[58px] group cursor-pointer"} onClick={()=>setLikeNum(likeNum+1)}>
                       <RiThumbUpFill className={"text-blue-500 group-hover:scale-[1.2] transition-all"} size={24}/>
                   </div>
                   <span className={"mt-1"}>{likeNum}</span>
               </div>
            </div>

        </div>
            <EmptyLine height={120} />
            <div className={"max-w-7xl mx-auto"}>
            <div className={"mt-20 p-4"}>
                <div className={"text-xl py-2"}>更多新闻</div>
                <div className={"flex gap-2 flex-col"}>
                    {News.map((item,index)=> <div key={index}>
                        <Link href={`/news/detail?id=${item.id}`} className={"flex gap-x-2 items-center hover:text-blue-500"}>
                            <Image src={item.cover} alt={""}  height={100} width={100} className={"rounded-md aspect-[2/1] object-cover"}/>
                            <div className={""}>
                                <div>{item.title}</div>
                                <div className={"text-xs text-gray-500 line-clamp-1"}>{item.content}</div>
                                <div className={"text-xs text-gray-400 line-clamp-1"}>{item.createdAt}</div>
                            </div>
                        </Link>
                    </div>)}
                </div>
            </div>
            <div className={"p-4"}>
                <div className={"text-xl py-2"}>特色美食</div>
                <div className={"grid gap-2 grid-cols-12"}>
                    {Productions.map((item,index)=>
                    {
                        if( item.type == 'foods'){
                            return <div key={index}>
                                <Link href={`/product?id=${item.id}`} className={"col-span-12 md:col-span-3 lg:col-span-2 flex gap-x-2 items-center flex-col justify-center hover:text-blue-500"}>
                                    <Image src={item.cover} alt={""}  height={200} width={200} className={"rounded-md aspect-[2/1] object-cover"}/>
                                    <span className={"text-sm mt-1"}>{item.title}</span>
                                </Link>
                            </div>
                        }
                    }
                        )}
                </div>
            </div>
            </div>
            <div className={"h-[300px]"}></div>
        </div>
    )
}